<template>
	<transition name="fade">
		<div v-if="!closed" :class="wrapClasses">
			<span :class="iconClasses" v-if="showIcon">
				<slot name="icon">
					<Icon :type="iconType"></Icon>
				</slot>
			</span>
			<span :class="messageClasses">
				<slot></slot>
			</span>
			<span :class="descClasses">
				<slot name="desc"></slot>
			</span>
			<a :class="closeClasses" v-if="closable" @click="close">
				<slot name="close">
					<Icon type="ios-close"></Icon>
				</slot>
			</a>
		</div>
	</transition>
</template>
<script lang="ts">
	import Icon from "../icon";
	import { oneOf } from "../../utils/assist";

	const prefixCls = "ivu-alert";

	import Anes from "../base";
	import { Prop, Component } from "vue-property-decorator";
	@Component({
		name: "Alert",
		components: { Icon }
	})
	export default class Alert extends Anes {
		@Prop({
			validator(value) {
				return oneOf(value, ["success", "info", "warning", "error"]);
			},
			default: "info"
		})
		type!: string;
		@Prop({ type: Boolean, default: false }) closable!: boolean;
		@Prop({ type: Boolean, default: false }) showIcon!: boolean;
		@Prop({ type: Boolean, default: false }) banner!: boolean;

		closed = false;
		desc = false;

		get wrapClasses() {
			return [
				`${prefixCls}`,
				`${prefixCls}-${this.type}`,
				{
					[`${prefixCls}-with-icon`]: this.showIcon,
					[`${prefixCls}-with-desc`]: this.desc,
					[`${prefixCls}-with-banner`]: this.banner
				}
			];
		}
		get messageClasses() {
			return `${prefixCls}-message`;
		}
		get descClasses() {
			return `${prefixCls}-desc`;
		}
		get closeClasses() {
			return `${prefixCls}-close`;
		}
		get iconClasses() {
			return `${prefixCls}-icon`;
		}
		get iconType() {
			let type = "";

			switch (this.type) {
				case "success":
					type = "ios-checkmark-circle";
					break;
				case "info":
					type = "ios-information-circle";
					break;
				case "warning":
					type = "ios-alert";
					break;
				case "error":
					type = "ios-close-circle";
					break;
			}

			if (this.desc) type += "-outline";
			return type;
		}

		close(e: Event) {
			this.closed = true;
			this.$emit("on-close", e);
		}

		mounted() {
			this.desc = this.$slots.desc !== undefined;
		}
	}
</script>
